<template>
	<div class="mine-section">
		<div class="header">
			<div class="head-main">
				<div class="photo" v-if="sex==='女'"><img src="../../assets/images/photo@2x.png" alt=""></div>
				<div class="photo" v-else><img src="../../assets/images/photo-male.svg" alt=""></div>
				<span class="name">{{name}}</span>
				<span class="name_sub">{{phone}}</span>
				<span class="name_sub">{{typeText}}</span>
			</div>
		</div>
		<div class="content">
			<div class="mine-list">
				<div class="mine-item" @click="handleRouteChange('/mine/userInfo')">
					<span>个人信息</span>
					<i class="iconfont icon-arrow"></i>
				</div>
				<div class="mine-item" @click="handleRouteChange('/mine/secretPolicy')">
					<span>隐私政策</span>
					<i class="iconfont icon-arrow"></i>
				</div>
				<div class="mine-item" @click="handleRouteChange('/mine/aboutUs')">
					<span>关于我们</span>
					<i class="iconfont icon-arrow"></i>
				</div>
			</div>
			<div class="btns">
				<van-button 
					class="logout-btn" 
					block 
					type="info"
					@click="handleLogout"
				>退出登录</van-button>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	components: {},
	methods: {
		handleRouteChange(path){
			if(!path) return
			this.$router.push({
				path
			})
		},
		handleLogout(){
			this.$dialog.confirm({
				title: '退出确认',
				message: '您确认退出应用么？',
				confirmButtonColor:"#209cff"
			})
			.then(() => {
				this.$store.commit("login/clearToken")
				this.$store.commit("login/clearAccount")
				this.$router.push({
						path:"/login"
				})
			})
		}
	},
	computed: {
		...mapState({
			type: state=>state.login.account.type,
			phone: state=>state.login.account.phone,
			sex: state=>state.login.account.sex,
			name: state=>state.login.account.name
		}),
		typeText(){
			return this.type==="1"?"社区居民委员会":"光荣自愿者"
		}
	},
};
</script>

<style scoped lang="scss">
@import "../../assets/style/variable.scss";
.mine-section{
	height: 100%;
	background-color: $bg-gray;
	.header{
		width: 100%;
		height: 320px;
		background: linear-gradient(45deg,#209cff,#68e0cf);
		border-bottom-left-radius: 50% 60px;
		border-bottom-right-radius: 50% 60px;
		@include flexCenter;
		.head-main{
			@include flexCenter;
			flex-direction: column;
			.photo{
				width: 130px;
				height: 130px;
				border-radius: 50%;
				overflow: hidden;
				border: 2px solid #fff;
				img{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			span{
				color: #fff;
				&.name{
					font-size: 34px;
					margin: 12px 0 6px;
				}
				&.name_sub{
					font-size: 24px;
					font-weight: bold;
				}
			}
		}
	}
	.content{
		width: 690px;
		margin: 0 auto;
		margin-top: 40px;
		.mine-list{
			.mine-item{
				height: 100px;
				background: #fff;
				border-radius: 10px;
				@include flexCenter;
				justify-content: space-between;
				padding: 0 25px 0 35px;
				margin-bottom: 30px;
				span{
					font-size: 28px;
				}
				i{
					font-size: 28px;
					color: #999999;
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		.btns{
			width: 80%;
			margin: 0 auto;
			margin-top: 60px;
			.logout-btn{
				border-radius: 10px;
				font-size: 28px;
				background: linear-gradient(45deg,#209cff,#68e0cf);
				border: none;
			}
		}
	}
}
</style>